<template>
	<u-cell :title="title" arrow-direction="right" isLink @click="btnSelectComego">
		<view slot="title">
			<view class="wrapper">
				<view class="label" :style="{width:`${widthLabel}px`}">{{ title }} :</view>
				<view class="content">{{insLabel}}</view>
			</view>
		</view>
	</u-cell>
</template>

<script>
	export default {
		name: "cx-select-customer",
		props: {
			value: {
				type: String,
				default: null
			},
			label: {
				type: String,
				default: null
			},
			widthLabel: {
				type: Number,
				default: 80
			},
      title: {
        type: String,
        default: '往来单位'
      },
      name: {
        type: String,
        default: 'SelectCustomer'
      }
		},
		data() {
			return {
				insLabel: null
			}
		},
		watch: {
			'label': {
				handler(val) {
					this.insLabel = val
				}
			},
			immediate: true
		},
		created() {
			this.insLabel = this.label
			const emitKey = "on-selected-customer"
			uni.$on(emitKey, data => {
				const ipnut = 'input' + this.name
				const update = 'update:label' + this.name
				// console.log("update",update);
				this.$emit(ipnut, data.id)
				this.$emit(update, data.name)
			})
			this.$once('hook:beforeDestroy', () => {
				uni.$off(emitKey)
			})
		},
		methods: {
			btnSelectComego() {
				this.$Router.push({
					name: this.name
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		display: flex;
		.label{
			color: #666666;
		}
		.content{
			text-align: left;
		}
	}
</style>
